<template>
  <div class="page employeeManage">
    <div class="scroll-view">
      <filterItem ref="employeeManageFilterItem"
                  @filterChoice="handleFilterChoice"
                  :employeeLevel="employeeLevelList"
                  :employeeOnjobStatus="employeeOnjobStatusList"
                  :roleInfo="roleInfo"></filterItem>
      <customHeader middleTitle="员工管理"
                    @rightCallBack="handleAddEmployee"
                    @leftCallBack="handleBack"
                    @rightCallBack2="handleClickFilter">
        <i class="filter-icon zhk-nav_add"></i>
        <div slot="slot2">
          <i class="filter-icon zhk-nav_filter" :class="{blue:mtSearchParam.shopId||(filterData['employeeLevelList']&&filterData['employeeLevelList'].length)||filterData['employeeOnjobStatusList']&&filterData['employeeOnjobStatusList'].length}"></i>
        </div>
      </customHeader>
      <div class="page-body">
        <div class="section"
             ref="wrapper"
             :style="{ height:'100%' }">
          <no-data msg="暂无数据"
                   v-if="list.length==0"></no-data>
          <ul class="list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="30">
            <li v-for="(item,index) in list"
                :key="index"
                @click="linkToEdit(item)">
              <span class="icon" :class="roleFormate(item.roleId).c">{{roleFormate(item.roleId).v}}</span>
              <span class="info">
                <p class="name">{{item.name}}</p>
                <p class="store" v-if="item.roleId==7">{{item.regionName?item.regionName : ""}}</p>
                <p class="store" v-else>{{item.shopName?item.shopName : ""}}</p>
              </span>
            </li>
          </ul>
       <p v-show="loading" class="page-infinite-loading">
          <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
        </p>
        <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
          <span>已经全部加载完毕</span>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import searchBar from "../../components/searchBar/searchBar";
import jsBridge from "../../tools/jsBridge.js";
import { Search, Toast, MessageBox } from "mint-ui";
import noData from "../../components/noData/noData";
import filterItem from "./filterItem";
export default {
  name: "employeeManage",
  data() {
    return {
      canSelectShop: true,
      loading: false,
      keywords: "",
      noMore: false,
      nextPage: null,
      list: [],
      sourceList: [],
      role: "",
      roleInfo: {},
      selfShopId: "",
      employeeLevelList: [
        { label: "店长", value: "4", checked: false },
        { label: "收银员", value: "6", checked: false },
        { label: "服务员", value: "5", checked: false },
        { label: "财务", value: "3", checked: false },
        { label: "运营/市场", value: "2", checked: false },
        { label: "区域经理", value: "7", checked: false }
      ],
      employeeOnjobStatusList: [
        { label: "在职", value: "1", checked: true },
        { label: "离职", value: "2", checked: false }
      ],
      filterData: {
        payType: [],
        store: []
      },
      mtSearchParam: {
        isInited: false,
        pageSize: 20,
        currentPage: 1,
        shopName: "全部门店",
        shopId: "",
        roleId: "",
        onjobStatus: "1",
        isHaveShop: false
      }
    };
  },
  methods: {
    //初始化用户信息
    initUser() {
      return new Promise((resolve, reject) => {
        this.ajax({
          type: "get",
          url: "/newapp/merchantApp/index/queryUserData.do",
          controlLoading: false
        }).then(result => {
          if (String(result.success) == "true") {
            sessionStorageClient.putJSON("user", result.resultObject);
            this.isHaveShop =
              result.resultObject.isHaveShop == false
                ? result.resultObject.isHaveShop
                : true;
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    roleFormate(roleId){
      let v="";
      let c="";
      if(roleId =='2'){
        v="运营";
        c="role-green";
      }
      else if(roleId =='3'){
        v="财务";
        c="role-orange";
      }
      else if(roleId =='4'){
        v="店长";
        c="role-blue";
      }
      else if(roleId =='5'){
        v="服务员";
        c="role-deepblue";
      }
      else if(roleId =='6'){
        v="收银员";
        c="role-purple";
      }
      else if(roleId =='7'){
        v="区域";
        c="role-red";
      }
      return {v:v,c:c};

    },
    linkToEdit(item) {
      let query = { edit: true };
      _.assignWith(query, item);
      this.$router.push({ path: "/employeeManage/addEmployee", query: query });
    },
    //打开筛选
    handleClickFilter() {
      this.$refs.employeeManageFilterItem.popupShow();
    },
    //筛选确定
    handleFilterChoice(v) {
      const store = this.filterData.store;
      this.filterData = v;
      if (v.store.length === 0) {
        this.filterData.store = store;
      } else {
        this.mtSearchParam.shopId = v.store[0].selectKey;
        this.mtSearchParam.shopName = v.store[0].selectName;
      }
      this.mtSearchParam.roleId =
        (v.employeeLevelList[0] && v.employeeLevelList[0].value) || "";
      this.mtSearchParam.onjobStatus =
        (v.employeeOnjobStatusList[0] && v.employeeOnjobStatusList[0].value) || "";
      this.loadData(1);
    },
    handleAddEmployee() {
      this.initUser()
        .then(() => {
          if (!this.isHaveShop) {
            MessageBox({
              title: "暂无门店",
              message: "请前往门店管理新建门店。",
              confirmButtonText: "知道了"
            }).then(action => {
              //门店管理
              this.$router.push({
                path: "/storeManage"
              });
            });
          } else {
            this.$router.push({
              path: "/employeeManage/addEmployee",
              query: { edit: false }
            });
          }
        }).catch(()=>{
          this.$router.push({
              path: "/employeeManage/addEmployee",
              query: { edit: false }
            });
        })
    },
    handleBack() {
      if (this.$refs.employeeManageFilterItem.popupVisible==true) {
        this.$refs.employeeManageFilterItem.back();
      } else {
        if (String(this.$route.query.close) == "true") {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    checkSourceList() {
      this.list = [];
      let temp = [];
      for (let i = 0, length = this.sourceList.length; i < length; i++) {
        if (this.role == "4") {
          if (
            this.sourceList[i].roleId == "4" ||
            this.sourceList[i].roleId == "5" ||
            this.sourceList[i].roleId == "6"
          ) {
            temp.push(this.sourceList[i]);
          }
        } else {
          if (
            this.sourceList[i].roleId == "2" ||
            this.sourceList[i].roleId == "3" ||
            this.sourceList[i].roleId == "4" ||
            this.sourceList[i].roleId == "5" ||
            this.sourceList[i].roleId == "6" ||
            this.sourceList[i].roleId == "7"
          ) {
            temp.push(this.sourceList[i]);
          }
        }
      }
      this.list = temp;
    },
    loadData(page) {
      this.loading = true;
      let mtParams = {};
      mtParams.pageSize = this.mtSearchParam.pageSize;
      mtParams.currentPage = page;
      mtParams.shopName = this.mtSearchParam.shopName;
      if (mtParams.shopName == "全部门店") {
        mtParams.shopId = "";
      }
      mtParams.shopId = this.role == "4" ? this.selfShopId : this.mtSearchParam.shopId;
     
      if (mtParams.currentPage == 1) {
        this.list = [];
        this.sourceList = [];
      }
      mtParams.roleId = this.mtSearchParam.roleId;
      mtParams.onjobStatus = this.mtSearchParam.onjobStatus;
      var url =
        "/newapp/employee/queryEmployee.do?currentPage=" +
        mtParams.currentPage +
        "&pageSize=" +
        mtParams.pageSize +
        "&shopId=" +
        mtParams.shopId +
        "&roleId=" +
        mtParams.roleId +
        "&onjobStatus=" +
        mtParams.onjobStatus;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && JSON.stringify(data) != "{}") {
              this.sourceList = this.sourceList.concat(data.pageData);
              this.checkSourceList();
              if (data.nextPage > page) {
                this.nextPage = data.nextPage;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },

    //无限加载
    loadMore() {
      if (this.loading || this.noMore || !this.role) {
        return;
      }
      var nextPage = this.nextPage;
      this.loadData(nextPage);
    }
  },
  created() {
    CommonUtil.getUserInfo().then(userInfo => {
      this.role = userInfo.role;
      this.roleInfo = userInfo;
      this.mtSearchParam.shopName = userInfo.shopName;
      this.selfShopId = userInfo.yzShopId;
      this.loadData(1);
    });
  },
  components: {
    customHeader,
    noData,
    filterItem
  }
};
</script>
<style lang='scss' scoped>
@import "employeeManage";
</style>
